<template>
  <div>
    <h1>绩效考核管理系统</h1>
    <van-cell-group>
      <van-field v-model="username"
                 required
                 clearable
                 label="用户名"
                 right-icon="question-o"
                 placeholder="请输入用户名"
                 @click-right-icon="$toast('question')" />

      <van-field v-model="password"
                 type="password"
                 label="密码"
                 placeholder="请输入密码"
                 required />
    </van-cell-group>
    <van-button type="primary"
                class="login-btn"
                size="large"
                @click="submit"
                round>登录</van-button>
  </div>
</template>
<script>
import { Field, CellGroup, Button } from 'vant'
import { mapActions } from 'vuex'
export default {
  name: 'login',
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  data () {
    return {
      username: 'admin',
      password: 123456
    }
  },
  methods: {
    ...mapActions('user', [
      'login'
    ]),
    submit () {
      this.login({
        vm: this,
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>
<style scoped>
h1 {
  text-align: center;
  color: #409eff;
}
/* .container[data-v-7ba5bd90] {
  padding: 0;
} */
.login-btn {
  margin-top: 30px;
}
</style>